簡(jiǎn)介:每個(gè)網(wǎng)站都包含導(dǎo)航菜單,它們形式多樣。本課程將由淺到深的介紹各種常見的導(dǎo)航條菜單的制作方法,從垂直方向的到水平方向的,再到用CSS樣式的圓角導(dǎo)航條,最后講解動(dòng)態(tài)交互功能且具有拉伸效果的導(dǎo)航條菜單,對(duì)比著學(xué)習(xí)以上內(nèi)容讓您的技術(shù)探索之路更高效!
第1章 垂直菜單的制作
用無序列表標(biāo)簽構(gòu)建菜單結(jié)構(gòu)并對(duì)垂直菜單的樣式進(jìn)行設(shè)置。
第2章 水平菜單的制作
本章教您只需通過一個(gè)屬性的簡(jiǎn)單設(shè)置就輕松的將垂直菜單轉(zhuǎn)變?yōu)樗讲藛巍?
第3章 圓角菜單的制作
如何通過設(shè)置不同的背景,對(duì)導(dǎo)航條菜單的樣式進(jìn)行改變,完成圓角菜單的制作。
第4章 伸縮菜單的制作——改變高度
重點(diǎn)講解如何通過對(duì)margin屬性的設(shè)置,讓水平菜單實(shí)現(xiàn)向上伸縮效果。
第5章 伸縮菜單的制作——水平方向
通過編寫JavaScript腳本和JQuery特效伸縮插件這兩種不同的方式,制作更動(dòng)感的水平伸縮菜單,并對(duì)以上兩種實(shí)現(xiàn)方式進(jìn)行對(duì)比。
第6章 總結(jié)
對(duì)案例所實(shí)現(xiàn)的各類導(dǎo)航條菜單的關(guān)鍵知識(shí)點(diǎn)進(jìn)行復(fù)習(xí)鞏固!